<template>
  <div id="channel-set">
    <el-form class="dialogForm" :model="form" label-position="top" ref="form_ref" :rules="form_rules">
      <el-form-item label="编码">
        <el-input v-model="form.coding"></el-input>
      </el-form-item>

      <el-form-item label="运营商" prop="operator_key">
        <el-select :disabled="Boolean(type_name == 'edit')" placeholder="请选择运营商" v-model="form.operator_key" @change="form.driver = ''">
          <el-option v-for="item in dic[$api.Enum.DicTypeOperator]" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="名称" prop="title">
        <el-input placeholder="请输入名称" v-model="form.title"></el-input>
      </el-form-item>

      <el-form-item label="驱动" prop="driver">
        <el-select placeholder="请选择驱动" v-model="form.driver" :disabled="!Boolean(form.operator_key) || !Boolean(type_name == 'add')">
          <div v-for="(item, index) in dic[$api.Enum.DicTypeChannelDrive]" :key="index">
            <el-option v-if="item.extend.operator_key == form.operator_key" :label="item.name" :value="item.key"></el-option>
          </div>
        </el-select>
      </el-form-item>

      <el-form-item label="类型" prop="type" v-if="false">
        <el-select :disabled="!Boolean(type_name == 'add')" placeholder="请选择类型" v-model="form.type">
          <el-option v-for="item in dic[$api.Enum.DicTypeChannelType]" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <div v-if="Boolean(form.driver) || !Boolean(type_name == 'add')" class="addChannelFormOption">
        <div v-for="(item, index) in dic[$api.Enum.DicTypeChannelDrive]" :key="index">
            <div v-if="item.extend.fields" v-show="item.key == form.driver">
              <el-divider><i class="el-icon-setting"></i></el-divider>
              <el-form-item class="textareaInput" :label="item.name" v-for="(item, index) in item.extend.fields" :key="index">
                <el-input :placeholder="item.description" v-model='form.options[item.key]'></el-input>
              </el-form-item>
            </div>
        </div>
      </div>

      <el-form-item class="buttonBox">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="formSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "IotChannelSet",
  props:{
    detail: Object,
  },
  data(){
    return {
      type_name: 'add',
      form:{
        driver: '',
        industry: 1,
        type: 1,
        operator_key:'',
        title: '',
        options:{}
      },
      form_rules: {
        operator_key: { required: true, trigger: "blur", message: "请选择运营商" },
        title: { required: true, trigger: "blur", message: "请输入名称" },
        driver: { required: true, trigger: "blur", message: "请选择渠驱动" },
        type: { required: true, trigger: "blur", message: "请选择渠道类型" },
        coding: { validator: this.validateNumber, trigger: "blur" },
      },
      dic: {},
    }
  },

  mounted() {
    this.$api.foundation.dicListExtendCache(
        [
          this.$api.Enum.DicTypeOperator,
          this.$api.Enum.DicTypeChannelType,
          this.$api.Enum.DicTypeChannelDrive
        ],
        {},
        res => {
          this.dic = res;
        }
    );
    if (this.detail != undefined && this.detail.id > 0){
      this.type_name = 'edit'
      Object.assign(this.form, this.detail)
    }
  },
  methods:{
    formSubmit() {
      this.$refs.form_ref.validate(valid => {
        if (!valid) {
          this.$message.error("请完善数据");
          return;
        }
        if (this.type_name == 'add') {
          this.$api.channel.add(this.form, res => {
            if (!res.status) {
              return this.$message.error(res.message);
            }
            this.$message.success("新增成功!");
            this.$emit('close')
          })
        }else if (this.type_name == 'edit'){
          delete this.form.status
          this.$api.channel.edit(this.form, res => {
            if (!res.status) {
              return this.$message.error(res.message);
            }
            this.$message.success("修改成功!");
            this.$emit('close')
          })
        }
      });
    },
    validateNumber (rule, value, callback) {
      let numberReg = /^\d+$|^\d+[.]?\d+$/;
      if (value !== "") {
        if (!numberReg.test(value)) {
          callback(new Error("请输入数字"));
        } else {
          callback();
        }
      }
    },
    close(){
      this.$emit('close', 1)
    }
  }
}
</script>

<style lang="less" scoped>
.addChannelFormOption {
  width: 100%;
}
</style>